var canvasa = document.getElementById('canvasa');
var contexta = canvasa.getContext('2d');

var canvasb = document.getElementById('canvasb');
var contextb = canvasb.getContext('2d');

var image = new Image();

window.onload = function() {
    image.src = "autumn.jpg";
    image.onload = function() {
        contexta.drawImage(image, 0, 0, canvasa.width, canvasa.height)
    }
}

function grayEffect() {
    var imageData = contexta.getImageData(0 ,0, canvasa.width, canvasa.height);
    var pixelData = imageData.data;
    for(var i = 0; i < canvasa.width * canvasa.height; i++) {
        // pixelData[4*i + 0] = 0;
        // pixelData[4*i + 1] = 100;
        var r = pixelData[i*4 + 0];
        var g = pixelData[i*4 + 1];
        var b = pixelData[i*4 + 2];

        var grey = r*0.3 + g*0.59 + b*0.11;

        pixelData[i*4 + 0] = grey;
        pixelData[i*4 + 1] = grey;
        pixelData[i*4 + 2] = grey;

    }
    console.log('imagedata', imageData);
    contextb.putImageData(imageData, 0, 0, 0, 0, canvasb.width, canvasb.height);
}

function blackEffect() {
    var imageData = contexta.getImageData(0 ,0, canvasa.width, canvasa.height);
    var pixelData = imageData.data;
    for(var i = 0; i < canvasa.width * canvasa.height; i++) {
        var v;
        // pixelData[4*i + 0] = 0;
        // pixelData[4*i + 1] = 100;
        var r = pixelData[i*4 + 0];
        var g = pixelData[i*4 + 1];
        var b = pixelData[i*4 + 2];

        var grey = r*0.3 + g*0.59 + b*0.11;
        if(grey > 255/2) {
            v = 255;
        }else {
            v = 0;
        }

        pixelData[i*4 + 0] = v;
        pixelData[i*4 + 1] = v;
        pixelData[i*4 + 2] = v;

    }
    console.log('imagedata', imageData);
    contextb.putImageData(imageData, 0, 0, 0, 0, canvasb.width, canvasb.height);
}

function reverseEffect() {
    var imageData = contexta.getImageData(0 ,0, canvasa.width, canvasa.height);
    var pixelData = imageData.data;
    for(var i = 0; i < canvasa.width * canvasa.height; i++) {
        var v;
        // pixelData[4*i + 0] = 0;
        // pixelData[4*i + 1] = 100;
        var r = pixelData[i*4 + 0];
        var g = pixelData[i*4 + 1];
        var b = pixelData[i*4 + 2];


        pixelData[i*4 + 0] = 255 - r;
        pixelData[i*4 + 1] = 255 - g;
        pixelData[i*4 + 2] = 255 - b;

    }
    console.log('imagedata', imageData);
    contextb.putImageData(imageData, 0, 0, 0, 0, canvasb.width, canvasb.height);
}

function blurEffect() {
    var temImageData = contexta.getImageData(0 ,0, canvasa.width, canvasa.height);;
    var temPixelData = temImageData.data;

    var imageData = contexta.getImageData(0 ,0, canvasa.width, canvasa.height);
    var pixelData = imageData.data;

    var blurR = 1;
    var totalNum = (blurR*2 + 1)*(blurR*2 + 1);

    for(var i = blurR; i < canvasa.width - blurR; i++) {
        for(var j = blurR; j < canvasa.height - blurR; j++) {
            var p = i*canvasa.width + j;
            var totalr = 0, totalg = 0, totalb = 0;
            //循环周围8个点
            for(var dx = -blurR; dx <=blurR; dx ++) {
                for(var dy = -blurR; dy <= blurR; dy ++) {
                    var x = i + dx;
                    var y = j + dy;
                    totalr+=pixelData[(x * canvasa.width + y) * 4 + 0];
                    totalg+=pixelData[(x * canvasa.width + y) * 4 + 1];
                    totalb+=pixelData[(x * canvasa.width + y) * 4 + 2];
                }
            }
            pixelData[p*4 + 0] = totalr/totalNum;
            pixelData[p*4 + 1] = totalg/totalNum;
            pixelData[p*4 + 2] = totalb/totalNum;

        }
    }

    contextb.putImageData(imageData, 0, 0, 0, 0, canvasb.width, canvasb.height);
}